<template>
  <div class="content">
    <v-form-render ref="SelfFormRender" :form-json="dataCfg.formContent" :form-data="dataCfg.formData" :option-data="dataCfg.optionData" :global-dsv="dataCfgDsv" @download="onDownloadClick"></v-form-render>
    <!-- 审批意见 -->
    <el-card v-if="curTaskOperateBtnConfig.curApplyTaskCommentVisiable && !isView && !isPreview" class="box-card card" shadow="hover">
      <div slot="header" class="clearfix card-header">
        <span>申请备注</span>
      </div>
      <el-row>
        <el-col :span="20" :offset="2">
          <el-form ref="taskForm" :model="taskForm" :rules="taskFormRules" label-width="120px">
            <el-form-item label="备注" prop="comment">
              <el-input type="textarea" :rows="5" v-model="taskForm.comment" :placeholder="curTaskOperateBtnConfig.taskComment ? curTaskOperateBtnConfig.taskComment : '请输入申请备注'"  @focus="onTaskFormCommentFocus"/>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <!-- footer -->
    <!-- 表单申请 -->
    <div class="footer" v-if="!isView && !isPreview">
        <el-button v-if="curTaskOperateBtnConfig.curSubmitBtnEnable" type="primary" @click="onSubmitForm" icon="el-icon-circle-check">提交</el-button>
        <el-button v-if="curTaskOperateBtnConfig.curResetBtnEnable" @click="onResetForm" icon="el-icon-refresh">重置</el-button>
        <el-button v-if="curTaskOperateBtnConfig.curStagingBtnEnable" type="primary" @click="onSaveForm" icon="el-icon-collection">暂存</el-button>
        <el-button v-if="curTaskOperateBtnConfig.curCancelBtnEnable && !isHiddenStagingBtn()" type="danger" @click="onCancelForm" icon="el-icon-circle-close">撤销</el-button>
    </div>
    <!-- 表单设计详情预览 -->
    <div class="footer" v-else-if="isPreview">
        <el-button type="primary" @click="onSubmitForm" icon="el-icon-circle-check">提交</el-button>
        <el-button @click="onResetForm" icon="el-icon-refresh">重置</el-button>
    </div>
  </div>
</template>

<script>
import { isString } from '@/utils/validate'
import selfForm from "@/mixins/selfForm"
import selfFormRender from "@/mixins/selfFormRender"

export default {
  name: 'CptSelfForm', 
  mixins: [selfForm, selfFormRender],
  props: {
    formDataCfg: {
      type: Object,
      required: true,
      default: {}
    },
    isView: {
      type: Boolean,
      required: false,
      default: false
    },
    isDisable: {
      type: Boolean,
      required: false,
      default: false
    },
    isPreview: {
      type: Boolean,
      required: false,
      default: false
    },
    isFreezed: {
      type: Boolean,
      required: false,
      default: false
    },
  },
  data() {
    let dataCfg = {
      'formContent': {},
      'formData': null,
      'optionData': {}
    }
    if (this.formDataCfg) {
      if (this.formDataCfg.formContent) {
        dataCfg.formContent = isString(this.formDataCfg.formContent) ? JSON.parse(this.formDataCfg.formContent) : this.formDataCfg.formContent
      }
      dataCfg.formData = this.formDataCfg.formData ? this.formDataCfg.formData : null
      dataCfg.optionData = this.formDataCfg.optionData ? this.formDataCfg.optionData : {}
    }
    console.log('CptSelfForm init dataCfg: ', dataCfg)
    return {
      dataCfg,
      formConfCopy: {},
      taskForm: {
        comment: null, // 意见内容
        procInsId: null, // 流程实例编号
        taskId: null, // 流程任务编号
        categoryId: null, // 工单大类
        subCategoryId: null // 工单子类
      },
      taskFormRules: {
        comment: [{ required: false, message: '请输入审批意见', trigger: 'blur' }],
      },
      taskDetail: null
    }
  },
  mounted() {
    this.initMyFormData()
    if (this.$refs['SelfFormRender']) {
      if (this.isDisable) {
        setTimeout(() => {
          if (this.$refs['SelfFormRender']) {
            this.$refs['SelfFormRender'].disableForm()
            // this.$refs['SelfFormRender'].setReadMode(true)
          }
        }, 1000);
      } else {
        if (this.$refs['SelfFormRender']._curSelfFormIsStraightEnableAllWidgets && this.$refs['SelfFormRender']._curSelfFormIsStraightEnableAllWidgets() === false) {
          console.warn('不可以直接启用组件表单（会影响默认禁用的组件）')
        } else {
          this.$refs['SelfFormRender'].enableForm()
        }
      }
    }
  },
  methods: {
    initMyFormData() {
      // if (!this.isFreezed) {
      //   this.dataCfg.formData = {...this.dataCfg.formData}
      // }
      this._initInnerFormData(this.dataCfg.formData)
    },
    isHiddenStagingBtn() {
      if (this.dataCfg.formData) {
        return this.dataCfg.formData.curTaskStaging !== 'Y'
      }
      return true
    },
    onTaskFormCommentFocus() {
      if (!this.taskForm.comment && this.curTaskOperateBtnConfig.taskComment && this.curTaskOperateBtnConfig.taskComment.trim().length) {
        this.taskForm.comment = this.curTaskOperateBtnConfig.taskComment
      }
    },
    /**
     * 设置任务流程详情数据
     */
     setTaskProcessDetail(detail) {
      this.taskDetail = detail
      if (this.taskDetail) {
        this.taskForm.comment = this.taskDetail.comment
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.content {
  padding: 20px;
  .footer {
    margin-top: 20px;
    padding: 0 20px;
    text-align: right;
  }

  .box-card {
    width: 100%;
    margin-bottom: 20px;
  }
  .card {
    // border-color: #909399;
  }
  .card-header {
    font-size: 14px;
    font-weight: bold;
  }

  .clearfix:after {
    clear: both
  }

}
</style>